<template>
	<swiper class="banner swiper" :indicator-dots="true" :autoplay="true" :circular="true" indicator-color="rgba(0, 0, 0, .3)" indicator-active-color="#fff" height="430rpx">
		<swiper-item v-for="(item, index) in list" :key="index" @click="toChange(item)">
			<button class="login_btn" @getphonenumber="authLogin" :open-type="opentype()"><image class="banner_img" :src="item.thumb" mode="scaleToFill"></image></button>
		</swiper-item>
	</swiper>
</template>

<script>
import util from '@/common/js/util.js';
export default {
	props: ['list'],
	data() {
		return {};
	},
	computed: {
		opentype() {
			return function(val) {
				return !uni.getStorageSync('userInfo').hasLogin ? 'getPhoneNumber' : '';
			};
		}
	},
	methods: {
		// 点击banner未登录先拉起登录后再跳转
		authLogin(e) {
			if (uni.getStorageSync('userInfo').hasLogin) return;
			if (e.detail.errMsg === 'getPhoneNumber:ok') {
				this.getLogin(e.detail.code)
					.then(res => {
						uni.$u.toast('授权登录成功');
						this.toChange(this.changeVal);
						this.$emit('loginAlert', false);
					})
					.catch(err => {
						console.log('登录失败');
					});
			} else {
				uni.showToast({
					title: '授权失败,请登录后查看',
					icon: 'none'
				});
			}
		},
		toChange(val) {
			this.changeVal = val;
			if (!uni.getStorageSync('userInfo').hasLogin) return;
			// 0 不跳转，1：外部跳转，2：内部跳转
			if (val.url_type == 0) {
				return;
			} else if (val.url_type == 1) {
				uni.reLaunch({
					url: '/subPages/web_view_h5/index?url=' + encodeURIComponent(val.link)
				});
			} else if (val.url_type == 2) {
				this.goPages(val.link);
			} else if (val.url_type == 3) {
				// 跳转视频号直播
				util.channelsLice();
			} else {
				// 广告跳转
				this.goPages('/subPages/web_view_h5/index?url=' + encodeURIComponent(val));
			}
			// 跳转会议小程序
			// uni.openEmbeddedMiniProgram({
			//   appId: 'wx6d3537c8290c5c57',
			//   // path: 'pages/index/index?id=123',
			//   // extraData: {
			//   //   'data1': 'test'
			//   // },
			//   success(res) {
			//     // 打开成功
			//   }
			// })
		}
	}
};
</script>

<style lang="scss" scoped>
.banner {
	width: 100%;
	height: 300rpx !important;
	// height: 430rpx !important;
	z-index: -999;

	.banner_img {
		width: 100%;
		// min-width: 750rpx;
		height: 300rpx;
		display: block;
		border-radius: 0;
	}
}
</style>
